<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 2px solid;
        }
    </style>
</head>

<body>

    <canvas width="500" height="400"></canvas>

    <script>
        let canvas = document.getElementsByTagName('canvas')[0];
        //获取画笔
        let pen = canvas.getContext('2d');

        // pen.fillStyle = 'red'
        // pen.fillRect(0, 0, 100, 60)

        // pen.translate(200, 200)
        // pen.fillRect(0, 0, 100, 60)

        // for (let i = 0; i < 10; i++) {
        //     pen.arc(20, 20, 20, 0, Math.PI * 2)
        //     pen.fill()
        //     pen.translate(40, 0)
        // }

        // pen.translate(250, 200)
        // for (let i = 0; i < 13; i++) {
        //     pen.beginPath()
        //     pen.arc(50, 0, 20, 0, Math.PI * 2)
        //     pen.fill()
        //     pen.closePath()
        //     pen.rotate(Math.PI * 30 / 180)
        // }






        // let width = 200, height = 200;//矩形的宽和高
        // let x = 100, y = 100;//矩形左上角的坐标
        // let radius = 50;
        // pen.lineWidth = 10;
        // pen.arc(x + radius, y + radius, radius, Math.PI, Math.PI / 180 * 270)
        // // pen.moveTo(x + radius, y);
        // pen.lineTo(x + width - radius, y);
        // pen.arc(x + width - radius, y + radius, radius, Math.PI / 180 * 270, 0)
        // pen.lineTo(x + width, y + height - radius);
        // pen.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 180 * 90)
        // pen.lineTo(x + radius, y + height);
        // pen.arc(x + radius, y + height - radius, radius, Math.PI / 180 * 90, Math.PI)
        // // pen.lineTo(x, y + radius);
        // pen.closePath()
        // // pen.stroke()
        // pen.fillStyle = 'green'
        // pen.fill()





    </script>

</body>

</html>